<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="18" :xs="24">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="说明" prop="reason">
            <editor v-model="form.reason" :readOnly="true" :height="200"></editor>
          </el-form-item>
          <el-form-item label="开始时间" prop="dateStart">
            <span>{{ parseTime(form.dateStart) }}</span>
          </el-form-item>
          <el-form-item label="结束时间" prop="dateEnd">
            <span>{{ parseTime(form.dateEnd) }}</span>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="dataList" v-if="dataList!==null&&dataList!==undefined&&dataList.length>0">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="编号" align="center" prop="id"/>
          <el-table-column label="文件名称" align="center" prop="name"/>
          <el-table-column label="文件大小" align="center" prop="fileSize"/>
          <el-table-column label="文件类型" align="center" prop="mimetype"/>
          <el-table-column label="文件格式" align="center" prop="indexContent"/>
          <el-table-column label="创建时间" align="center" prop="createDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-search"
                @click="handleShow(scope.row)"
              >查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-table v-loading="loading" :data="approverList">
          <el-table-column label="名称" align="center" prop="userName"/>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.gyy_audit_state" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="序号" align="center" prop="sequence"/>
          <el-table-column label="备注" align="center" prop="note"/>
        </el-table>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="resetQuery">重 置</el-button>
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </div>
</template>

<script>
  import { listApproval, getApproval } from '@/api/gyy/approval'

  export default {
    name: 'AuditDetail',
    dicts: ['gyy_audit_state'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 字典表格数据
        dataList: [],
        approverList:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        // 表单参数
        form: {}
      }
    },
    created() {
      const auditId = this.$route.params && this.$route.params.tableId
      this.getType(auditId)
    },
    methods: {
      /** 查询字典类型详细 */
      getType(auditId) {
        getApproval(auditId).then(response => {
          console.log(response)
          this.form = response.data
          this.dataList = response.data.attachmentList
          this.approverList = response.data.approverList
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      /** 返回按钮操作 */
      handleClose() {
        const obj = { path: '/gyy/audit' }
        this.$tab.closeOpenPage(obj)
      },
      /** 重置按钮操作 */
      resetQuery() {
        const auditId = this.$route.params && this.$route.params.tableId
        this.getType(auditId)
      },
      handleShow(row) {
        const id = row.id
        const name = row.name
        window.open("https://openc2p.com/web/image/"+id,"_target")// = 'https://openc2p.com/web/image/' + id
        //this.$tab.openPage('查看[' + name + ']详情', '/gyy/audit-detail/index/' + tableId)
      }
    }
  }
</script>
